<template>
  <CceSearchForm @form="handlerSearch"></CceSearchForm>
  <Table
    size="large"
    :scroll="scroll"
    :columns="cceRecordColumns"
    :data-source="dataSource"
    :pagination="pagination"
    @change="handleTableChange"
    bordered
    sticky
    class="main-table"
  >
  </Table>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { Table, TableProps } from 'ant-design-vue';
import { getCceRecordList } from '/@/api/maintenance-center/alarm/alarm';
import CceSearchForm from '/@/views/maintenance-center/alarm-record/components/cceSearchForm.vue';

const cceRecordColumns = [
  {
    title: '告警名称',
    dataIndex: 'eventName',
    width: 150,
  },
  {
    title: '告警级别',
    dataIndex: 'eventSeverity',
    width: 150,
  },
  {
    title: '告警源',
    dataIndex: 'resourceProvider',
    width: 150,
  },
  {
    title: '资源类型',
    dataIndex: 'resourceType',
    width: 150,
  },
  {
    title: '资源名称',
    dataIndex: 'resourceId',
    width: 150,
  },
  {
    title: '告警详情',
    dataIndex: 'message',
    width: 150,
  },
  {
    title: '告警发生时间',
    dataIndex: 'startsAt',
    width: 150,
  },
  {
    title: '告警类型',
    dataIndex: 'alertType',
    width: 150,
  },
];
const scroll = ref<undefined | object>(undefined);
const dataSource = ref([]);
let current = ref('1');
let size = ref('10');
const total = ref('0');
let searchParams = ref({});

const pagination = computed(() => ({
  showSizeChanger: true,
  total: total.value,
  current: current.value,
  size: size.value,
  showTotal: (total) => {
    return `共 ${total} 条`;
  },
}));

const handleTableChange: TableProps['onChange'] = (pag) => {
  current.value = pag.current;
  size.value = pag.pageSize;
  if (Number(size) > 10) {
    scroll.value = { x: 'max-content', y: 500 };
  }
  getCceRecordList({
    ...{
      current: current.value,
      size: size.value,
    },
    ...searchParams.value,
  }).then((res) => {
    dataSource.value = res;
    total.value = res;
    current.value = pag.current;
    size.value = pag.pageSize;
  });
};

const handlerSearch = (params: any) => {
  searchParams.value = params;
  getCceRecordList({
    ...{
      current: current.value,
      size: size.value,
    },
    ...searchParams.value,
  }).then((res) => {
    dataSource.value = res;
    total.value = res;
  });
};
</script>

<style lang="less" scoped>
/* 表格斑马样式 **/
/deep/ .ant-table-tbody tr:nth-child(2n) {
  background-color: #f8f8f8;
}

/deep/ .ant-table-thead > tr > th {
  text-align: center;
  background-color: #f5f5f5;
  color: #959595;
  font-weight: bold;
}

/deep/ .ant-table-tbody {
  text-align: center;
}

/deep/ .ant-table-tbody > tr > td {
  padding: 10px;
}

/deep/ .ant-table-thead > tr > th {
  padding: 25px;
}
</style>
